<!--单个接口的数据读取-->
<template>
  <div>
    <Input v-model="interfaceName" placeholder="Enter something..." style="width: 250px"/>
    <Select v-model="methodType" style="width:100px">
      <Option v-for="item in methodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>

    <Input v-model="interfacePath" placeholder="Enter something..." style="width: 800px"/>

    <Button type="warning" @click="send" :loading="sendLoading">Send</Button>
    <Button type="error" :disabled="cancelDisabled" @click="changeButtonStatus2Init">cancel</Button>
    <Button type="info" @click="saveSingleInterface">Save</Button>
    <div>
      <br>
    </div>
    <Tabs>
      <TabPane label="headers" name="headers" tab="sub-tab">
        <Input v-model="headers" type="textarea" :rows=12 placeholder="Enter json..."/>
      </TabPane>
      <TabPane label="params" name="params" tab="sub-tab">
        <Input v-model="params" type="textarea" :rows=12 placeholder="Enter json..."/>
      </TabPane>
      <TabPane label="body" name="body" tab="sub-tab">
        <Input v-model="body" type="textarea" :rows=12 placeholder="Enter json..."/>
      </TabPane>
    </Tabs>
    <div>
      <br>
    </div>
    <Input v-model="result" type="textarea" placeholder="这里会显示结果" :rows=15 readonly/>
  </div>
</template>

<script>
import bus from "emitvue";
import electron from 'electron';

const store = electron.remote.getGlobal('store');
const utils = require('./lib/utils.js');

export default {
  name: "InterfaceLoad",
  data() {
    return {
      rawInterfaceName: "",// 最开始的接口名称 比对的时候需要用到
      interfaceName: '',// 接口名称
      //默认GET
      methodType: 'GET',
      interfacePath: 'https://www.baidu.com',
      // 加载条和取消
      sendLoading: false,
      cancelDisabled: true,
      methodList: [
        {
          value: 'GET',
          label: 'GET'
        },
        {
          value: 'POST',
          label: 'POST'
        },
        {
          value: 'PUT',
          label: 'PUT'
        },
        {
          value: 'DELETE',
          label: 'DELETE'
        },
        {
          value: 'PATCH',
          label: 'PATCH'
        },
      ],
      headers: "",
      params: "",
      body: "",
      result: "",
    }
  },
  methods: {
    // 发送请求
    async send() {
      console.log("发送请求...", this.interfacePath, this.methodType,)
      let res = null;
      this.sendLoading = true;
      this.cancelDisabled = false;
      try {
        res = await utils.send(this.interfacePath, this.methodType, this.headers || {},
            this.params || {}, this.body || {});
        res = JSON.stringify(res, null, 4);
      } catch (error) {
        res = error.toString();
        this.$Message.error('请求接口出错')
      }

      this.sendLoading = false;
      this.cancelDisabled = true;
      console.log('res = ', res);
      this.result = res;
    },
    // 把按钮的状态复原到一开始
    changeButtonStatus2Init() {
      this.sendLoading = false;
      this.cancelDisabled = true;
    },
    // 保存单个接口
    saveSingleInterface() {
      let data = {
        interfacePath: this.interfacePath,
        name: this.interfaceName,
        methodType: this.methodType,
        headers: utils.safeJsonParse(this.headers),
        params: utils.safeJsonParse(this.params),
        body: utils.safeJsonParse(this.body),
        rawName: this.rawInterfaceName,
      }

      bus.$emit('saveSingleInterface', data);
    },
  },
  created() {
    bus.$on('interfaceLoad', (data) => {
      this.interfacePath = data.interfacePath || "";
      this.interfaceName = data.name || "接口名称不能为空"; // 这个为空不太可能出现的
      this.methodType = data.methodType || 'GET';
      this.changeButtonStatus2Init();
      this.headers = JSON.stringify(data.headers || {}, null, 4);
      this.params = JSON.stringify(data.params || {}, null, 4);
      this.body = JSON.stringify(data.body || {}, null, 4);
      this.result = "";
      this.rawInterfaceName = this.interfaceName;
    });
  }
}
</script>

<style scoped>

</style>
